import React from 'react'
import { View, Input, Text } from '@tarojs/components'
import ClearButton from '@COMPONENTS/CustomInput/ClearButton'
import './PhoneInput.scss'

const PhoneInput = ({
  phone = '', placeholder, onInput, onClear
}) => (
  <View className="input-container">
    <Text className="text">+86</Text>
    <Input
      type="number"
      value={phone}
      className="phone-input"
      placeholder={placeholder}
      placeholderClass="placeholderPhone"
      onInput={onInput}
      maxlength={11}
    />
    <ClearButton value={phone} onClear={onClear} />
  </View>
)

export default PhoneInput
